<template>
	<view class="center">
		<navBar :title="$t('tabBar.my')"></navBar>
		<view class="item hdimg">
			<view>头像</view>
			<button class="avatar-button" open-type="chooseAvatar" @chooseavatar="onChooseavatar">
				<!-- <image class="avatar" :src="userInfo.avatar ? userInfo.avatar : '/static/image/hd_img.png'"></image> -->
				<image class="avatar" src="/static/image/hd_img.png"></image>
			</button>
		</view>
		<view class="item">
			<view class="item-left">用户昵称</view>
			<view class="item-right">
				<input type="nickname" class="userName" placeholder="请输入昵称" v-model="userInfo.name"
					@change="getNickname"></input>
			</view>
		</view>

		<view class="item">
			<view class="item-left">性别</view>
			<view class="item-right">
				<view class="uni-list">
					<view class="uni-list-cell">
						<view class="uni-list-cell-db">
							<picker @change="bindPickerChange" :value="userInfo.gender" :range="array">
								<view class="uni-input">{{array[userInfo.gender || 0]}}</view>
							</picker>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="item">
			<view class="item-left">生日</view>
			<view class="item-right">
				<view class="uni-list">
					<view class="uni-list-cell">
						<view class="uni-list-cell-db">
							<picker mode="date" :value="date" :start="startDate" :end="endDate"
								@change="bindDateChange">
								<view class="uni-input">{{userInfo.birthday}}</view>
							</picker>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="item">
			<view class="item-left">手机号</view>
			<view class="item-right">
				{{userInfo.phone || '未知手机号'}}
			</view>
		</view>


		<view class="btn-item flex_col active" @click="handleUpdateUser">保存修改</view>
	</view>

</template>

<script>
	import {
		API_URL
	} from '@/env'
	import {
		getUserInfo,
		updateUser
	} from '@/api/my.js'
	export default {

		data() {
			const currentDate = this.getDate({
				format: true
			})
			return {
				show: false,
				avatarimg: '', // 头像图片的URL
				array: ['保密', '男', '女'],
				index: 0,
				date: currentDate,
				userInfo: {
					gender: 0
				},
			};
		},
		// computed: {
		//     // 计算属性，用于格式化时间戳
		//     formattedDate() {
		// 		if(!this.userInfo.userUid){
		// 			return'';
		// 		}
		//       // 使用新的Date对象来格式化时间戳
		//       const date = new Date(this.userInfo.userUid);			  
		//       // 返回格式化的日期字符串
		//       return date.toLocaleDateString() + ' ' + date.toLocaleTimeString();
		//     }
		//   },
		onLoad() {
			this.getUserInfo(); //获取个人信息
		},
		methods: {
			// 获取微信名称
			getNickname(e) {
				this.userInfo.name = e.detail.value
			},
			getUserInfo() {
				getUserInfo().then((r) => {
					this.userInfo = r.data;
				});
			},
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();

				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},
			bindPickerChange: function(e) {
				console.log('picker发送选择改变，携带值为', e.detail.value)
				this.index = e.detail.value
				this.userInfo.gender = e.detail.value
			},
			bindDateChange: function(e) {
				this.date = e.detail.value
				this.userInfo.birthday = e.detail.value
			},
			// 修改昵称
			handleUpdateUser() {
				updateUser({
					...this.userInfo
				}).then((r) => {
					this.config.Toast('修改成功');
					// this.userInfo = r.data;
				});
			},
			// 手动获取头像
			async onChooseavatar(e) {
				this.avatarimg = e.detail.avatarUrl;
				console.log(e)
				await uni.uploadFile({
					url: API_URL + '/backstage/file/upload', // 你的上传API地址
					filePath: e.detail.avatarUrl,
					name: 'files', // 这里根据API的要求进行修改
					header: {
						'Content-Type': 'multipart/form-data',
						'Accept': 'application/json, text/plain, */*',
					},
					formData: {
						//token: uni.getStorageSync('token')
					},
					success: async uploadFileRes => {
						let res = JSON.parse(uploadFileRes.data)
						console.log('res==', res)
						// if (res.code == 1) {
						// 	let imgPath = res.data.imgPath
						// 	await updateUserInfo({
						// 		headImgUrl: imgPath
						// 	}).then(() => {
						// 		this.config.Toast('修改成功');
						// 	});
						// } else {
						// 	this.config.Toast('上传失败')
						// }
					},
					fail: uploadFileError => {
						// 处理上传失败的错误
					}
				});

			},
			openUp() {
				this.show = true
			},
			close() {
				this.show = false
			},
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background: #fff;
	}

	.avatar-button {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		border: none;
		outline: none;
		background-color: transparent;
		cursor: pointer;
		padding: 0;
		margin: 0;
	}

	.avatar {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		object-fit: cover;
	}

	button::after {
		border: none;
		padding: 0;
		margin: 0;
		width: 50rpx;
		height: 50rpx;
		border-radius: 50%;
	}

	.u-safe-bottom {
		display: none;
	}

	.center {
		box-sizing: border-box;

		.up-pop {
			width: 580rpx;

			.up-title {
				font-size: 32rpx;
				color: #999999;
				margin: 48rpx 0 36rpx 0;
			}

			.up-cont {
				font-weight: 500;
				font-size: 32rpx;
				color: #333333;
				margin-bottom: 63rpx;
			}

			.up-btn {
				height: 76rpx;
				background: #212222;
				font-size: 32rpx;
				color: #FFFFFF;
				border-radius: 0 0 20rpx 20rpx;
			}
		}

		.btn-item {
			width: 350rpx;
			height: 90rpx;
			background: #AF9453;
			color: #fff;
			border-radius: 15rpx;
			text-align: center;
			margin: 50px auto;
		}

		.item {
			display: flex;
			justify-content: space-between;
			align-items: center;
			line-height: 100rpx;
			border-bottom: 1px solid #f5f5f5;
			padding: 0 40rpx;
			background: #fff;

			.item-left {
				font-weight: bold;
				font-size: 28rpx;
				color: #333333;
			}

			.item-right {
				text-align: right;
			}

			.jcbtn {
				width: 144rpx;
				height: 51rpx;
				border-radius: 26rpx;
				border: 1px solid #ccc;
				font-size: 24rpx;
			}

			.icon-arrow {
				position: relative;
				padding-right: 25rpx;
			}

			.icon-arrow:after {
				content: '';
				position: absolute;
				top: 15rpx;
				right: -1px;
				width: 14rpx;
				height: 14rpx;
				border-top: 1rpx solid #ccc;
				border-right: 2rpx solid #ccc;
				transform: rotate(45deg);
			}
		}
	}
</style>